<template>
	<view :id="templateId" class="container tabbar-page">
		<template>
			<view
				@click="loginNavTo()"
				:style="themeStyles.backgroundMainColor"
				class="user-section"
			>
				<image
					class="bg"
					:src="baseTemplateFileUri + 'image/user/title_bg.png'"
				></image>
				<view class="user-info-box">
					<view class="portrait-box">
						<image
							class="portrait"
							:src="
								customerData.headImage ||
									baseTemplateFileUri +
										'image/user/missing-face.png'
							"
						></image>
					</view>
					<view class="info-box">
						<text
							:style="themeStyles.textAuxiliaryColor"
							class="username"
							>{{ customerData.nickname || "游客" }}</text
						>
					</view>
				</view>
				<view class="vip-card-box">
					<image
						class="card-bg"
						:src="baseTemplateFileUri + 'image/user/vip_bg.png'"
					></image>
					<view class="tit">
						<uni-icon
							name="diamond"
							size="44rpx"
							:color="themeStyles.lightMainColor"
						>
						</uni-icon>
						<text
							:style="themeStyles.textMainColor"
							class="vip-name"
							>{{
								customerData.customerMemberName || "非会员"
							}}</text
						>
					</view>
					<view
						@click.stop="
							loginNavTo('/pages/user/pages/vip/vipDetail')
						"
						:style="themeStyles.btnFullColor"
						class="df-r b-btn"
						>查看详情</view
					>

					<!-- <text class="e-m">丰赢 FY</text>
				<text class="e-b">开通会员开发无bug 一测就上线</text> -->
				</view>
			</view>

			<view
				class="cover-container"
				:style="[
					{
						transform: coverTransform,
						transition: coverTransition
					}
				]"
				@touchstart="coverTouchstart"
				@touchmove="coverTouchmove"
				@touchend="coverTouchend"
				>
				<image
					class="arc"
					:src="baseTemplateFileUri + 'image/user/arc.png'"
				></image>
				<div class="panel statistics-section">
					<!-- <view
						@click="
							loginNavTo(
								'/pages/user/pages/recordGoods/recordGoodsList?pageType=1102'
							)
						"
						class="statistics-item"
					>
						<view
							:style="themeStyles.textMainColor"
							class="statistics-item__number"
							>{{ customerData.collectNum || "0" }}</view
						>
						<view class="statistics-item__name">收藏</view>
					</view> -->
					<!-- 积分 -->
					<view class="statistics-item">
						<view
							:style="themeStyles.textMainColor"
							class="statistics-item__number"
							>{{ integral }}</view
						>
						<view class="statistics-item__name">积分</view>
					</view>
					<!-- 优惠券 -->
					<view
						@click="
							loginNavTo('/pages/activity/pages/coupon/myCoupon')
						"
						class="statistics-item"
					>
						<view
							:style="themeStyles.textMainColor"
							class="statistics-item__number"
							>{{ customerData.couponNum || "0" }}</view
						>
						<view class="statistics-item__name">优惠券</view>
					</view>
					<!-- 余额 -->
					<view 
						class="statistics-item statistics-item_last"
						@click="
							loginNavTo('/pages/user/pages/wallet/balance')
						">
						<view
							:style="themeStyles.textMainColor"
							class="statistics-item__number statistics-item__number_last clamp"
							>{{balance}}</view
						>
						<view class="statistics-item__name">余额</view>
					</view>
				</div>

				<!-- 订单 -->
				<view class="panel">
					<view class="order-title zz-flex zz-jc-sb zz-ai-c">
						<view class="fs28 lh40 color333">我的订单</view>
						<view 
							class="zz-flex zz-ai-c"
							@click="
								loginNavTo(
									'/pages/user/pages/order/orderList?orderStatus=0'
								)
							">
							<view class="fs26 lh36 color999">查看全部订单</view>
							<view class="fs26 lh36 color999">
								<text class="zz-pos_rel color999 template__icon template__icon-right"></text>
							</view>
						</view>
					</view>
					<view class=" order-section">
						<!-- 全部订单 -->
						<!-- <view
							class="order-item"
							@click="
								loginNavTo(
									'/pages/user/pages/order/orderList?orderStatus=0'
								)
							"
							hover-class="common-hover"
							:hover-stay-time="50"
						>
							<uni-icon
								name="order-full"
								:color="themeStyles.lightMainColor"
								size="60rpx"
							>
							</uni-icon>
							<tex class="order-item__name">全部订单</tex>
						</view> -->
						<!-- 待付款 -->
						<view
							class="order-item"
							@click="
								loginNavTo(
									'/pages/user/pages/order/orderList?orderStatus=1'
								)
							"
							hover-class="common-hover"
							:hover-stay-time="50"
						>
							<uni-icon
								name="pay-full"
								:color="themeStyles.lightMainColor"
								size="60rpx"
							>
							</uni-icon>
							<text class="order-item__name">待付款</text>
						</view>
						<!-- 待成团 -->
						<view
							class="order-item"
							@click="
								loginNavTo(
									'/pages/user/pages/order/orderList?orderStatus=2'
								)
							"
							hover-class="common-hover"
							:hover-stay-time="50"
						>
							<uni-icon
								name="group-full"
								:color="themeStyles.lightMainColor"
								size="60rpx"
							>
							</uni-icon>
							<text class="order-item__name">待成团</text>
						</view>
						<!-- 待到店 -->
						<view
							class="order-item"
							@click="
								loginNavTo(
									'/pages/user/pages/order/orderList?orderStatus=3'
								)
							"
							hover-class="common-hover"
							:hover-stay-time="50"
						>
							<uni-icon
								name="reach-store"
								:color="themeStyles.lightMainColor"
								size="60rpx"
							>
							</uni-icon>
							<text class="order-item__name">待到店</text>
						</view>
						<!-- 待发货 -->
						<!-- <view
							class="order-item"
							@click="
								loginNavTo(
									'/pages/user/pages/order/orderList?orderStatus=2'
								)
							"
							hover-class="common-hover"
							:hover-stay-time="50"
						>
							<uni-icon
								name="ship-full"
								:color="themeStyles.lightMainColor"
								size="60rpx"
							>
							</uni-icon>
							<text class="order-item__name">待发货</text>
						</view> -->
						<!-- 待收货 -->
						<view
							class="order-item"
							@click="
								loginNavTo(
									'/pages/user/pages/order/orderList?orderStatus=4'
								)
							"
							hover-class="common-hover"
							:hover-stay-time="50"
						>
							<uni-icon
								name="receipt-full"
								:color="themeStyles.lightMainColor"
								size="60rpx"
							>
							</uni-icon>
							<text class="order-item__name">待收货</text>
						</view>
						<!-- 退款售后 -->
						<view
							class="order-item"
							@click="
								loginNavTo(
									'/pages/user/pages/afterSale/afterSaleList'
								)
							"
							hover-class="common-hover"
							:hover-stay-time="50"
						>
							<uni-icon
								name="after-sale"
								:color="themeStyles.lightMainColor"
								size="60rpx"
							>
							</uni-icon>
							<text class="order-item__name">退款/售后</text>
						</view>
					</view>
				</view>
				<view class="panel history-section icon">
					<!-- 浏览记录 -->
					<!-- v-if="hasLogin && !!historyList.length" -->
					<view class="history-box">
						<view
							@click="
								loginNavTo(
									'/pages/user/pages/recordGoods/recordGoodsList?pageType=1101'
								)
							"
							class="df jc-sb sec-header"
						>
							<view class="df ai-c jc-fs">
								<uni-icon
									name="clock-full"
									:color="themeStyles.lightMainColor"
									size="40rpx"
								>
								</uni-icon>
								<text class="sec-header__name">浏览历史</text>
							</view>
							<uni-icon name="right" size="36rpx" color="#979797">
							</uni-icon>
						</view>
						<scroll-view
							@scrolltolower="getMoreBrowse"
							scroll-x
							class="h-list"
						>
							<image
								@click="
									loginNavTo(
										`/pages/common/pages/goods/goodsDetail?goodsId=${item.goodsId}`
									)
								"
								v-for="(item, index) in historyList"
								:key="index"
								:src="baseFileUri + item.imagePath"
								mode="aspectFill"
							></image>
						</scroll-view>
					</view>
					<!-- “我的”相关菜单 -->
					<uni-list-cell
						@eventClick="
							loginNavTo('/pages/activity/pages/myGroup')
						"
						icon="template__icon-group-full"
						:iconColor="themeStyles.lightMainColor"
						title="我的拼团"
						border=""
					></uni-list-cell>
					<uni-list-cell
						@eventClick="
							loginNavTo('/pages/activity/pages/myBargain')
						"
						icon="template__icon-bargain-full"
						:iconColor="themeStyles.lightMainColor"
						title="我的砍价"
						border=""
					></uni-list-cell>
					<uni-list-cell
						@eventClick="
							loginNavTo('/pages/user/pages/address/addressList')
						"
						icon="template__icon-address-full"
						:iconColor="themeStyles.lightMainColor"
						title="我的地址"
						border=""
					></uni-list-cell>
					<uni-list-cell
						@eventClick="
							loginNavTo(
								'/pages/user/pages/recordGoods/recordGoodsList?pageType=1102'
							)
						"
						icon="template_icon-collection"
						:iconColor="themeStyles.lightMainColor"
						title="我的收藏"
						border=""
					></uni-list-cell>
					<uni-list-cell
						@eventClick="taggerContactPop()"
						icon="template__icon-service-full"
						:iconColor="themeStyles.lightMainColor"
						title="联系客服"
						border=""
					></uni-list-cell>
					<!-- <uni-list-cell @eventClick="loginNavTo('/pages/common/pages/set/set')" icon="icon-setting-full" iconColor="#a6a6a6" title="设置" border="" ></uni-list-cell> -->
				</view>
			</view>
			<!-- 打开客服弹出层 begin -->
			<view
				@click="showContact = false"
				v-if="showContact"
				class="df df-c jc-c pop"
				>
				<!-- 商家二维码（临时用） begin -->
				<view
					@click.stop="stopBubble()"
					class="df df-c jc-c merchant-qr-wrap"
					>
					<view class="df ai-c jc-fs shop-info">
						<image
							:src="
								(shopInfo.logo &&
									`${baseFileUri}${shopInfo.logo}`) ||
									`${baseCommonFileUri}image/shop_default.png`
							"
							class="shop-info__avatar"
						>
						</image>
						<view class="shop-info__name">
							{{ shopInfo.intro || "welcome" }}</view
						>
					</view>
					<image
						:src="
							(shopInfo.merchantQr &&
								`${baseFileUri}${shopInfo.merchantQr}`) ||
								''
						"
						class="merchant-qr"
						:show-menu-by-longpress="true"
					></image>
					<view class="merchant-qr-desc"
						>长按二维码保存，扫码联系客服
					</view>
				</view>
				<!-- 商家二维码（临时用） end -->
				<!-- 联系客服确认框 begin -->
				<!-- <view class="df df-c modal">
					<view class="df df-c prompt">
						<text class="title">提示</text>
						<text class="content">是否联系客服？</text>
					</view>
					<view
						:style="themeStyles.btnAuxiliaryColor"
						class="df df-r btn-group"
					>
						<button
							@click="taggerContactPop()"
							:style="themeStyles.textMainColor"
							class="df1 df df-r submit"
						>
							取消
						</button>
						<button
							@click="taggerContactPop()"
							open-type="contact"
							:style="themeStyles.textMainColor"
							class="df1 df df-r submit"
						>
							确认
						</button>
					</view>
				</view> -->
				<!-- 联系客服确认框 end -->
			</view>
			<!-- 弹出层 end -->
		</template>

		<uni-tabbar
			@onClick="switchTabbar"
			:animationData="animationData"
			:badgeBg="themeStyles.lightMainColor"
			:tintColor="themeStyles.mainColor"
		>
		</uni-tabbar>
	</view>
</template>  
<script>
/** api begin */
import { queryGoodsBrowseList } from "@/lib/api/interestedServer/goodsBrowse";
/* 客户详情查询 */
import { queryCustomerDeatil } from "@/lib/api/customerServer/info";
/** api end */

/** mixins begin */
import tabbarMixin from "@/mixins/tabbar";
import walletMixin from "@/mixins/wallet";
/** mixins end */

/** components begin */
import uniTabbar from "@/components/uniTabbar";
import uniListCell from "@/components/uniListCell";
import uniIcon from "@/components/uniIcon/uniIcon";
/** components end */

import { mapState,mapMutations } from "vuex";

/** 非页面渲染参数 begin */
let [startY, moveY] = [0, 0];

let pageAtTop = true;

let browseCurrentPage = 1;
/** 非页面渲染参数 end */

export default {
	components: {
		uniTabbar,
		uniListCell,
		uniIcon
	},
	mixins: [
		tabbarMixin,
		walletMixin
	],
	data() {
		return {
			showContact: false,
			historyList: [],
			loginInfo: "",
			coverTransform: "translateY(0px)",
			coverTransition: "0s",
			moving: false,
			customerData: {}
		};
	},

	onLoad() {
		browseCurrentPage = 1;
		uni.showLoading({ title: "加载中" });
	},

	async onShow() {
		try {
			/* 获取客户详情 */
			await this.getCustomerDeatil();
			uni.hideLoading();
			browseCurrentPage = 1;
			this.getGoodsBrowseList();	
		} catch (error) {
			console.log(error);
		}
	},

	//下拉刷新
	async onPullDownRefresh() {
		uni.showLoading({ title: "加载中" });
		Object.assign(this.$data, this.$options.data());
		browseCurrentPage = 1;
		await this.getCustomerDeatil();
		await this.getGoodsBrowseList();
		uni.stopPullDownRefresh();
	},

	computed: {
		...mapState("shop", ["shopInfo"]),
		/* 钱包余额 */
		...mapState("wallet", ["balance", "integral"])
	},

	methods: {
		taggerContactPop() {
			this.showContact = !this.showContact;
			//   uni.makePhoneCall({
			//     phoneNumber: "17300797754",
			//     fail: error => {
			//       console.log("error", error);
			//     }
			//   });
		},

		async getCustomerDeatil() {
			try {
				const res = await queryCustomerDeatil({
					showLoading: false
				});
				this.customerData = res.data;
			} catch (error) {
				console.log("error", error);
				this.$api.showToast(error.resultInfo || "加载失败* _ *");
			}
		},

		// 获取更多浏览记录
		getMoreBrowse() {
			console.log("loading more browse");
			if (this.loadingType === "more") {
				browseCurrentPage++;
				this.getGoodsBrowseList();
			}
		},

		// 获取浏览记录
		async getGoodsBrowseList() {
			const propsData = {
				currentPage: browseCurrentPage,
				showLoading: false
			};
			try {
				const res = await queryGoodsBrowseList(propsData);

				if (propsData.currentPage === 1) {
					this.historyList = res.data.list;
				} else {
					this.historyList = this.historyList.concat(res.data.list);
				}
				const noMore = this.historyList.length >= res.data.total;
				this.loadingType = noMore ? "noMore" : "more";
			} catch (error) {
				console.log("error", error);
			}
		},

		/**
		 *  会员卡下拉和回弹
		 *  1.关闭bounce避免ios端下拉冲突
		 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
		 *    transition设置0.1秒延迟，让css来过渡这段空窗期
		 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
		 */
		coverTouchstart(e) {
			if (pageAtTop === false) {
				return;
			}
			this.coverTransition = "transform .1s linear";
			startY = e.touches[0].clientY;
		},
		coverTouchmove(e) {
			moveY = e.touches[0].clientY;
			let moveDistance = moveY - startY;
			if (moveDistance < 0) {
				this.moving = false;
				return;
			}
			this.moving = true;
			if (moveDistance >= 80 && moveDistance < 100) {
				moveDistance = 80;
			}

			if (moveDistance > 0 && moveDistance <= 80) {
				this.coverTransform = `translateY(${moveDistance}px)`;
			}
		},
		coverTouchend() {
			if (this.moving === false) {
				return;
			}
			this.moving = false;
			this.coverTransition =
				"transform 0.3s cubic-bezier(.21,1.93,.53,.64)";
			this.coverTransform = "translateY(0px)";
		}
	}
};
</script>  
<style lang='scss'>
@import "@/pages/tabbar/styles/user.scss";
</style>